<template>
    <div class="pagination-view">
        <el-pagination
            small
            background
            :currentPage="props.currentPage"
            :page-size="props.pageSize"
            layout="prev, pager, next"
            :total="props.total"
            @update:current-page="handleCurrentChange"
            @update:page-size="handleSizeChange"
            class="mt-4"
        />
    </div>
</template>
<script setup>
const props = defineProps({
  //总数
  total: {
    type: Number,
    default: 0
  },
  //每页条数
  pageSize: {
    type: Number,
    default: 15,
  },
  //当前页
  currentPage: {
    type: Number,
    default: 1
  }
})
const emit = defineEmits(['changeSize','currentChange'])
const handleCurrentChange = (page) =>{
  // 返回页码
  emit('currentChange',page)
}
const handleSizeChange = (size) => {
  // 返回size
  emit('changeSize',size)
}
</script>
<style lang="scss" scoped>
.pagination-view {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>
